import React, { FC } from 'react'
import styles from './ManageLayout.module.scss'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Button, Space, Divider, message } from "antd";
import { useRequest } from 'ahooks'
import { createQuestionService } from '../services/question'
// import {  } from '@ant-design/icons'

const ManageLayout: FC = () => {
  const nav = useNavigate()
  const { pathname } = useLocation()
  // const [loading, setLoading] = useState(false)

  // const handleCreate = async () => {
  //   setLoading(true)
  //   const data = await createQuestionService()
  //   const { id = 1 } = data || {}
  //   setLoading(false)
  //   if (id) {
  //     nav(`/question/edit/${id}`)
  //   }
  // }

  const { loading, run: handleCreate } = useRequest(createQuestionService, {
    manual: true,
    onSuccess: (result) => {
      message.success("创建成功")
      nav(`/question/edit/${result.id}`)
    }
  })

  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <Space direction="vertical">
          <Button type="primary" size="large" onClick={handleCreate} disabled=
          {loading}>创建问卷</Button>
          <Divider></Divider>
          <Button type={pathname.startsWith('/manage/list') ? 'default' : 'text'} size="large" onClick={() => {nav('/manage/list')}}>我的问卷</Button>
          <Button type={pathname.startsWith('/manage/star') ? 'default' : 'text'} size="large" onClick={() => {nav('/manage/star')}}>星标问卷</Button>
          <Button type={pathname.startsWith('/manage/trash') ? 'default' : 'text'} size="large" onClick={() => {nav('/manage/trash')}}>回收站</Button>
        </Space>
      </div>
      <div className={styles.right}>
        <Outlet />
      </div>
    </div>
  )
}

export default ManageLayout